<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>360商城</title>
    <link rel="stylesheet" href="./libs/iconfont/iconfont.css">
    <link rel="stylesheet" href="./libs/swiper-bundle.min.css">
    <link rel="shortcut icon" href="./favicon.ico">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/pages.css">
    <style>
        html,
      body {
        position: relative;
        height: 490px;
      }

      body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #000;
        margin: 0;
        padding: 0;
      }

      .swiper {
        width: 100%;
        height: 100%;
      }

      .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
      }

      .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }


      .swiper-button-next{
        width: 1900px;
      }
      .swiper-button-next:after, .swiper-button-prev:after {
          margin-right: -1009px;
          color:#eee;
          width: 42px;
          height: 72px;
          text-align: center;
          padding-top: 20px;
          background-color:rgba(51,51,51,0.7);
      }

      /*下拉选项卡*/
      .allBox{
          position: relative;
      }
      .allBox>.tab-box{
        width: 260px;
        height: 490px;
        background:rgba(51,51,51,0.7);
        z-index: 20;
        position: absolute;
        top: -490px;
        left: 247px;
      }
      .tab-box .tab-itemAll>a{
          display: block;
          width: 260px;
          height: 48px;
          color: #fff;
          font-size: 18px;
          text-align: center;
          line-height: 48px;
      }
      .tab-box .tab-itemAll>a>i{
          font-size: 20px;
          color: #666;
      }
      .tab-box .tab-itemAll>a:focus,.tab-box .tab-itemAll>a:hover{
          background: #333;
      }
      .tab-box .tab-list>li>a{
        display: block;
          width: 260px;
          height: 48px;
          color: #fff;
          font-size: 18px;
          text-align: center;
          line-height: 48px;
      }
      .tab-box .tab-list>li>a:focus,.tab-box .tab-list>li>a:hover{
        background-color: #333;
      }
      /*下一级菜单*/
      .tab-list{
          position: relative;
      }
      .tab-list>li>.list{
          overflow: hidden;
          position: absolute;
          top: -48px;
          left: 260px;
      }
      .tab-list>li:nth-child(1)>.list{
          width: 950px;
          height: 490px;
          background-color: #fff;
          display: none;
      }
      .tab-list>li:nth-child(1)>.list:focus,.tab-list>li:nth-child(1):hover .list{
          display: block;
      }
      .tab-list>li:nth-child(1)>.list>p>a{
          color: #332442;
          font-size: 30px;
          display: block;
          text-align: center;
      }

      .tab-list>li:nth-child(2)>.list{
          width: 950px;
          height: 490px;
          background-color: #fff;
          display: none;
      }
      .tab-list>li:nth-child(2)>.list:focus,.tab-list>li:nth-child(2):hover .list{
          display: block;
      }
      .tab-list>li:nth-child(2)>.list>p>a{
          color: #332442;
          font-size: 30px;
          display: block;
          text-align: center;
      }

      .tab-list>li:nth-child(3)>.list{
          width: 950px;
          height: 490px;
          background-color: #fff;
          display: none;
      }
      .tab-list>li:nth-child(3)>.list:focus,.tab-list>li:nth-child(3):hover .list{
          display: block;
      }
      .tab-list>li:nth-child(3)>.list>p>a{
          color: #332442;
          font-size: 30px;
          display: block;
          text-align: center;
      }

      .tab-list>li:nth-child(4)>.list{
          width: 950px;
          height: 490px;
          background-color: #fff;
          display: none;
      }
      .tab-list>li:nth-child(4)>.list:focus,.tab-list>li:nth-child(4):hover .list{
          display: block;
      }
      .tab-list>li:nth-child(4)>.list>p>a{
          color: #332442;
          font-size: 30px;
          display: block;
          text-align: center;
      }

      .tab-list>li:nth-child(5)>.list{
          width: 950px;
          height: 490px;
          background-color: #fff;
          display: none;
      }
      .tab-list>li:nth-child(5)>.list:focus,.tab-list>li:nth-child(5):hover .list{
          display: block;
      }
      .tab-list>li:nth-child(5)>.list>p>a{
          color: #332442;
          font-size: 30px;
          display: block;
          text-align: center;
      }

      #main>.list_ul>li:hover{
        transform: scale(1.1,1.1);
      }
    </style>
</head>
<body>
    <header id="header"></header>

    <!--swiper-->
    <div class="swiper mySwiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide"><img src="https://p3.ssl.qhimg.com/t017e59fdafaf4ea843.webp" alt=""></div>
          <div class="swiper-slide"><img src="https://p4.ssl.qhimg.com/t01897de831e1b091e4.webp" alt=""></div>
          <div class="swiper-slide"><img src="https://p2.ssl.qhimg.com/t01e4b288f82203874e.webp" alt=""></div>
          <div class="swiper-slide"><img src="https://p3.ssl.qhimg.com/t01b1ae7e231ac75328.webp" alt=""></div>
          <div class="swiper-slide"><img src="https://p0.ssl.qhimg.com/t010870466939631120.webp" alt=""></div>
        </div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
      </div>

      <!--下拉选项卡-->
      <div class="allBox"> 
       <div class="tab-box">
            <div class="tab-itemAll"><a href="#"><i class="iconfont icon-baoyou"></i> 全部分类 </a></div>
            <ul class="tab-list">
                <li>
                    <a href="#">家庭安防</a>
                    <div class="list">
                        <p><a href="#">摄像机</a></p>
                    </div>
                </li>
                <li>
                    <a href="#">安全路由</a>
                    <div class="list">
                        <p><a href="#">路由器</a></p>
                    </div>
                </li>
                <li>
                    <a href="#">智能手表</a>
                    <div class="list">
                        <p><a href="#">手表</a></p>
                    </div>
                </li>
                <li>
                    <a href="#">汽车用品</a>
                    <div class="list">
                        <p><a href="#">记录仪</a></p>
                    </div>
                </li>
                <li>
                    <a href="#">扫地机器人</a>
                    <div class="list">
                        <p><a href="#">长江一号</a></p>
                    </div>
                </li>
            </ul>
      </div>
    </div>

    <main id="main">
        <ul class="list_ul paging_list"></ul>
        <a href="../html/cart.html">
            <div class="count">
                <i class="iconfont icon-gouwuche"></i>
                商品共<span>0</span>件
            </div>
        </a>
    </main>

    <!--分页结构-->
    <div class="paging_content">
        <div class="paging_first">首页</div>
        <div class="paging_up">上一个</div>
        <div class="paging_btn"></div>
        <div class="paging_down">下一个</div>
        <div class="paging_last" id="">尾页</div>
    </div>

    <footer id="footer"></footer>
    
    <script src="/js/cookie.js"></script>
    <script src="./libs/swiper-bundle.min.js"></script>
    <script src="./libs/jquery.min.js"></script>
    <script src="./js/pAjax.js"></script>
    <script src="./js/goods-list.js"></script>
    <script src="./libs/jquery-paging.js"></script>
    <script>
        $('header').load('../html/header.html')
        $('footer').load('../html/footer.html')
    </script>

    <!-- Initialize Swiper -->
    <script>
        var swiper = new Swiper(".mySwiper", {
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
            autoplay:{
                delay:2000
            },
            loop:true
        });
    </script>

    <!--禁止用户缩放网页-->
    <script>
        document.addEventListener('mousewheel', function (e) {
        e = e || window.event;
        if ((e.wheelDelta && event.ctrlKey) || e.detail) {
            event.preventDefault();
        }
        }, { capture: false, passive: false});
        document.addEventListener('keydown', function (event) {
        if ((event.ctrlKey === true || event.metaKey === true)
            && (event.keyCode === 61 || event.keyCode === 107
            || event.keyCode === 173 || event.keyCode === 109
            || event.keyCode === 187 || event.keyCode === 189)) {
            event.preventDefault();
        }
        }, false);
    </script>

</body>
</html>